<%@page pageEncoding="utf-8"%>
<jsp:include page="/common/_common.jsp" />
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 空白页</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="${ctx_path}/favicon.ico">
<jsp:include page="/common/_css.jsp" />
<link href="${ctx_path}/css/plugins/iCheck/custom.css" rel="stylesheet">


</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content">

		<!--  <div class="row">
            <div class="col-sm-12">
                <div class="middle-box text-center animated fadeInRightBig">
                    <h3 class="font-bold">这里是页面内容</h3>

                    <div class="error-desc">
                        您可以在这里添加栅格，参考首页及其他页面完成不同的布局
                        <br/><a href="#" class="btn btn-primary m-t">打开主页</a>
                    </div>
                </div>
            </div>
        </div> -->

		<div class="col-sm-12">
			<div class="tabs-container">
				<ul class="nav nav-tabs">
					<li class="active"><a data-toggle="tab" href="#tab-1"
						aria-expanded="true"> 学生列表</a></li>
					<li class=""><a data-toggle="tab" href="#tab-2"
						aria-expanded="false">教师列表</a></li>
						
				</ul>
				<div class="tab-content">
					<div id="tab-1" class="tab-pane active">
						<div class="panel-body">
							<div class="col-sm-12">
								<div class="ibox float-e-margins" style="position:relative">
									<div class="">
										<div class="row">
											<div class="col-sm-5 m-b-xs">
												每页显示 <select class="input-sm input-s-sm inline" id="student-select"
													style="width: 60px">
													<option value="5">5</option>
													<option value="10">10</option>
													<option value="20">20</option>
													<option value="50">50</option>
												</select> 条
											</div>
											<div class="col-sm-4 m-b-xs"></div>
											<div class="col-sm-3">
												<div class="input-group">
													<input type="text" placeholder="请输入关键词" id="student-search"
														class="input-sm form-control"> <span
														class="input-group-btn">
														<span type="button" class="btn btn-sm btn-primary" onclick="searchStudent()">
															搜索</span>
													</span>
												</div>
											</div>
										</div>
										<br />
										<div class="table-responsive">
											<table class="table table-striped table-bordered">
												<thead>
													<tr>
														<th><input type="checkbox"  class="i-checks" id="studentCheck"></th>
														<th>账号</th>
														<th>姓名</th>
														<th>生日</th>
														<th>电话</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody id="student">
												</tbody>
											</table>
											<div class="btn btn-primary btn-sm" onclick="deleteStudentSelete()">批量删除</div>
											<div class="btn btn-primary btn-sm" onclick="showAddPop()">添加用户</div>
											<div id="student-page" style="position: absolute;right: 0px;bottom: -20px;">
												 <div style="text-align:right"></div> 
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="tab-2" class="tab-pane">
						<div class="panel-body">
							<div class="col-sm-12">
								<div class="ibox float-e-margins">
									<div class="">
										<div class="row">
											<div class="col-sm-5 m-b-xs">
												每页显示 <select class="input-sm input-s-sm inline" id="teacher-select"
													style="width: 60px">
													<option value="5">5</option>
													<option value="10">10</option>
													<option value="20">20</option>
													<option value="50">50</option>
												</select> 条
											</div>
											<div class="col-sm-4 m-b-xs"></div>
											<div class="col-sm-3">
												<div class="input-group">
													<input type="text" placeholder="请输入关键词"
														class="input-sm form-control"> <span
														class="input-group-btn">
														<button type="button" class="btn btn-sm btn-primary">
															搜索</button>
													</span>
												</div>
											</div>
										</div>
										<br />
										<div class="table-responsive">
											<table class="table table-striped table-bordered">
												<thead>
													<tr>
														<th><input type="checkbox"  class="i-checks" id="teacherCheck"></th>
														<th>账号</th>
														<th>姓名</th>
														<th>生日</th>
														<th>电话</th>
														<th>操作</th>
													</tr>
												</thead>
												<tbody id="teacher">
													
												</tbody>
											</table>
											<div class="btn btn-primary btn-sm" onclick="deleteTeacherSelect()">批量删除</div> 
											
										</div>

									</div>
								</div>
							</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>

	<jsp:include page="/common/_script.jsp"/> 
	<!-- Peity -->
	<script src="${ctx_path}/js/plugins/peity/jquery.peity.min.js"></script>
	<!-- iCheck -->
	<script src="${ctx_path}/js/plugins/iCheck/icheck.min.js"></script>
	<!-- Peity -->
	<script src="${ctx_path}/js/demo/peity-demo.js"></script>
	
	<!-- <script type="text/javascript"
		src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
	统计代码，可删除 -->
	
</body>
<script>
$('#student-select').change(function(){
	$('#student-page').html('<div style="text-align:right"></div>');
	$.get('${ctx_path}/UserServlet/pageRole',{'role':'student','pageSize':$('#student-select').val(),'pageNum':1},function(data){
		format(data['userList'],'student');
		$('#student-page').children('div').pagination({
			  total_pages: data['pageCount'],
			  current_page: data['pageNum'],
			  prev: "上一页",
			  next: "下一页",
			  callback: function(event, page) {
				  updateTable('student',page); 
			  }
			});
	},'json');	
});
	//ajax发请求查找所有学生:
		function locaData(role,pageNum){
		$('#'+role+'-page').html('<div style="text-align:right"></div>');
		$.get('${ctx_path}/UserServlet/pageRole',{'role':role,'pageSize':$('#'+role+'-select').val(),'pageNum':pageNum},function(data){
			format(data['userList'],role);
			$('#'+role+'-page').children('div').pagination({
				  total_pages: data['pageCount'],
				  current_page: data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  callback: function(event, page) {
					updateTable(role,page);
				  }
				});
		},'json');	
	}
		function updateTable(role,pageNum){
			$.get('${ctx_path}/UserServlet/pageRole',{'role':role,'pageSize':$('#'+role+'-select').val(),'pageNum':pageNum},function(data){
				format(data['userList'],role);
			},'json');	
			}
		
	locaData("student",1);
	locaData("teacher",1);
	//格式化数组，把数组塞到表格
	function format(data,role){
		//清空列表
		$('#'+role).empty();
		for( i in data){
			var obj = $('<tr>').append('<td><input type="checkbox" class="i-checks '+role+'" value="'+data[i]['u_id']+'"></td>');
			 obj =  obj.append('<td>'+data[i]['u_id']+'</td>');
			 obj = obj.append('<td>'+data[i]['name']+'</td>');
			 obj = obj.append('<td>'+data[i]['birthday']+'</td>');
			 obj = obj.append('<td>'+data[i]['phone']+'</td>');
			 obj = obj.append('<td><a href="table_basic.html#"><i class="fa fa-check text-navy"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="cursor:pointer" onclick="deleteThis('+data[i]['u_id']+',\''+role+'\')"><i class="fa fa-close text-danger"></i></span></td>');
			 obj = obj.append('</tr>');
			console.log(obj[0]); 
			$('#'+role).append(obj);
		}
		//原有插件代码复制。更改checkbox样式
		$('.i-checks').iCheck({
			checkboxClass : 'icheckbox_square-green',
			radioClass : 'iradio_square-green',
		});
		$('#studentCheck').on('ifChecked',function(event){
			$('input:checkbox.student').iCheck('check');	
		});
		$('#studentCheck').on('ifUnchecked',function(event){
			$('input:checkbox.student').iCheck('uncheck');
		});
		$('#teacherCheck').on('ifChecked',function(event){
			$('input:checkbox.teacher').iCheck('check');	
		});
		$('#teacherCheck').on('ifUnchecked',function(event){
			$('input:checkbox.teacher').iCheck('uncheck');
		});
	}
	function deleteThis(u_id,role){
	if (confirm("确定删除吗")) {
	$.get('${ctx_path}/UserServlet/remove',{'u_id':u_id},function(data){
		if (data) {
			layer.msg("删除成功");
			if (role=="student") {
				locaData("student");
			}else if(role=="teacher"){
				locaData("teacher");
			}
		}else{
			layer.msg("删除失败");	
	}	
	})
	}
	}
	function deleteStudentSelete(){
		var flag = false;
		$('input:checkbox.student').each(function(){
			if($(this).prop('checked')){
				flag=true;
			}
		});
		if(!flag){
			layer.msg("至少选择一个");
			return;
		}
		
		if(confirm('确定删除所选吗？')){
			var u_ids=[];
			$('input:checkbox.student').each(function(){
				//把被选中的复选框的值放到u_ids数组里
				if($(this).prop('checked')){
					u_ids.push($(this).val());
				}
			});
			//ajax去删除数组中id对应的数据：
			 $.get('${ctx_path}/UserServlet/removeAll',{'u_ids':JSON.stringify(u_ids)},function(data){
				if(data){
					layer.msg('删除成功');
					locaData('student');
				}else{
					layer.msg('删除失败');
				}
			}); 
		}
	}
	//搜索：
	function searchStudent(){
		
		$.get('${ctx_path}/UserServlet/AllSearch',{'role':'student','pageSize':$('#student-select').val(),'pageNum':1,'search':$('#student-search').val()},function(data){
			format(data['userList'],'student');
			$('#student-page').html('<div style="text-align:right"></div>');
			$('#student-page').children('div').pagination({
				  total_pages: data['pageCount'],
				  current_page: data['pageNum'],
				  prev: "上一页",
				  next: "下一页",
				  callback: function(event, page) {
					  updateStudentTableSearch(page); 
				  }
			});
		},'json');	
	}
 	function updateStudentTableSearch(page){
 		$.get('${ctx_path}/UserServlet/AllSearch',{'role':'student','pageSize':$('#student-select').val(),'pageNum':page,'search':$('#student-search').val()},function(data){
			format(data['userList'],'student');
		},'json');
	} 
 	function showAddPop(){
 		window.parent.layer.open({
 			 type:2,
 			 content:[ '${ctx_path}/user_layer.jsp','no'],
 			 area:['70%','70%'],
 			 offset:['20%','20%']
 		});	
 	}
</script>

</html>
